
<style type="text/css">
	.layui-table-cell{
		height: auto;
	}
</style>

<fieldset class="layui-elem-field layui-field-title">
  <legend>分类列表</legend>
</fieldset>

<table id="list" lay-filter="list"></table>

<script type="text/html" id="bar">
	{{#
		if(d.status == 1){
	}}
	<a class="layui-btn layui-btn" lay-event="recover">恢复</a>
	{{#
		}
	}}
	{{#
		if(d.status == 0){
	}}
	<a class="layui-btn layui-btn-danger" lay-event="delete">删除</a>
	{{#
		}
	}}
	
	<a class="layui-btn layui-btn-normal" lay-event="edit"> 编辑</a>
</script>

<script type="text/html" id="sort-edit">
	<form class="layui-form">
	
		<input type="hidden" name="id" />
	
		<div class="layui-form-item">
			<label class="layui-form-label">分类名称</label>
			<div class="layui-input-inline">
				<input type="text" name="name" class="layui-input" placeholder="请输入分类名" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">父分类</label>
			<div class="layui-input-inline" id="parent">
				<select name="parent" ></select>
			</div>
		</div>
		
		<div class="layui-form-item">
			<input type="hidden" name="picture" />
			<label class="layui-form-label">分类图片</label>
			<div class="layui-input-inline">
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test1">上传图片</button>
				  <div class="layui-upload-list">
				    <img class="layui-upload-img" id="demo1" style="width: 92px;height: 92px;">
				    <p id="demoText"></p>
				  </div>
				  <div style="width: 95px;">
				    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
				      <div class="layui-progress-bar" lay-percent=""></div>
				    </div>
				  </div>
				</div> 
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-inline">
				<button type="submit" class="layui-btn" lay-submit lay-filter="edit">修改</button>
			</div>
		</div>
	</form>
</script>

<script type="text/html" id="picture">
	{{#
		if(d.picture != null){
	}}
		<img name="pic" src="http://localhost:9000/upload/{{d.picture}}" />
	{{#
		}
	}}
		
	
</script>

<script type="text/javascript">
	layui.use(['form','table','upload'],function(){
		var table = layui.table;
		var form = layui.form;
		var token = getCookie("token");
		var upload = layui.upload;
		//ajax异步请求数据，渲染表格
		table.render({
			// headers:{token:token},
			elem:'#list',
			url:'http://localhost:9000/api/goodssorts',
			where:{parent:0},
			method:'get',
			height:500,
			page:true,
			cols:[[
				{field:'id',title:'ID',},
				{field:'name',title:'分类名',},
				{field:'picture',title:'分类图',templet:'#picture',width:200,},
				{field:'parent',title:'父分类',templet:function(d){
					return d.parentSort==null?'':d.parentSort.name;
				}},
				{field:'status',title:'状态',templet:function(d){
					return ['正常','删除'][d.status];
					
				}},
				{title:'操作',toolbar:'#bar',width:200}
			]],
			parseData: function(res){ //res 即为原始返回的数据
			    return {
			      "code": 0, //解析接口状态
			      "msg": res.msg, //解析提示文本
			      "count": res.data.total, //解析数据长度
			      "data": res.data.list //解析数据列表
			    };
			  },
			  done: function(res, curr, count){
			  				// 固定列高度适应
			  				$(".layui-table-main  tr").each(function (index ,val) {
			  					$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
			  				});
			  			}

		});
		
		table.on('tool(list)',function(obj){
			if (obj.event == 'delete') {
				layer.confirm('确认删除？',function(index){
					layer.close(index);
					
					//调用删除方法(重置状态码为1)
					$.ajax({
						// headers:{token:token},
						url:'http://localhost:9000/api/goodssorts',
						type:'delete',
						data:{id:obj.data.id},
						dataType:'json',
						success:function(data){
							if (data.status == 200) {
								layer.msg("删除成功");
							} else if(data.status == 404){
								layer.msg(data.msg);
							}
							table.reload('list');
						},
						error:function(){}
					});
				})
			} else if(obj.event == 'edit'){//
				var index = layer.open({
					type:1,
					area:['600px','500px'],
					content:$('#sort-edit').html()
				});
				$("input[name='id']").val(obj.data.id);
				$("input[name='name']").val(obj.data.name);
				$("#demo1").attr('src', 'http://localhost:9000/upload/'+obj.data.picture)
				
				
				//常规使用 - 普通图片上传
				  var uploadInst = upload.render({
				    elem: '#test1'
				    ,url: 'http://localhost:9000/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
				    ,before: function(obj){
				      //预读本地文件示例，不支持ie8
				      obj.preview(function(index, file, result){
				        $('#demo1').attr('src', result); //图片链接（base64）
				      });
				      
				      element.progress('demo', '0%'); //进度条复位
				      layer.msg('上传中', {icon: 16, time: 0});
				    }
				    ,done: function(res){
				      //如果上传失败
				      if(res.code > 0){
				        return layer.msg('上传失败');
				      }
				      //上传成功的一些操作
					  $("input[name='picture']").val(res.data);
				      //……
				      $('#demoText').html(''); //置空上传失败的状态
				    }
				    ,error: function(){
				      //演示失败状态，并实现重传
				      var demoText = $('#demoText');
				      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				      demoText.find('.demo-reload').on('click', function(){
				        uploadInst.upload();
				      });
				    }
				    //进度条
				    ,progress: function(n, elem, e){
				      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
				      if(n == 100){
				        layer.msg('上传完毕', {icon: 1});
				      }
				    }
				  });
				  
				  //获取父分类下拉列表框并渲染
				  $.ajax({
					  // headers:{token:token},
					  url:'http://localhost:9000/api/goodssorts',
					  type:'get',
					  data:{},
					  dataType:'json',
					  success:function(data){
						 var html = "<option value='0'>请选择父分类</option>";
						 $.each(data.data.list,function(index,item){
						 	if (item.id == obj.data.parent) {
						 		html +="<option value='"+item.id+"' selected='selected'>"+item.name+"</option>";
						 	} else{
						 		html +="<option value='"+item.id+"'>"+item.name+"</option>";
						 	}
							
							
						 });
						 $("select[name='parent']").html(html);
						  
						  //渲染
						  form.render();
					  },
					  error:function(){}
				  });
				  
				  form.on('submit(edit)',function(data){
					  $.ajax({
						  url:'http://localhost:9000/api/goodssorts',
						  type:'put',
						  data:JSON.stringify(data.field),
						  contentType:'application/json;charset=UTF-8',
						  dataType:'json',
						  success:function(data){
							if(data.status == 201){
								
								gotoUrl("sort/list.html");	
								
							}else{
								 layer.msg("修改失败");											 
							}
							layui.close(index);
							
						  },
						  error:function(){}
					  });
					  return false;
				  });
				
			}else if(obj.event == 'recover'){
				layer.confirm('确认恢复？',function(index){
					layer.close(index);
					
					//调用删除方法(重置状态码为0)
					$.ajax({
						// headers:{token:token},
						url:'http://localhost:9000/api/goodssorts',
						type:'delete',
						data:{id:obj.data.id},
						dataType:'json',
						success:function(data){
							if (data.status == 200) {
								layer.msg("恢复成功");
							} else if(data.status == 404){
								layer.msg(data.msg);
							}
							table.reload('list');
						},
						error:function(){}
					});
				})
				// return false;
			}
		});
	});
</script>